<style type="text/css">
.menu2 { width: 240px; border: none; }
.menu2 li { width: 120px; float: left; }
.menu2 li ul {
	min-width: 120px; max-width: 360px; background-color: #333;
	white-space: nowrap; display: inline-block;
}
.menu2 li ul li { white-space: nowrap; display: inline-block; }
</style>
<script type="text/javascript">
$(function(){
	var mu = $('#menuDemo').mac('menu', {
		children: [{
			title : 'MenuA',
			icon: 'icon-newwin'
		},{
			title : 'MenuC',
			icon: 'icon-newwin'
		},{
			title : 'MenuB',
			icon: 'icon-newwin',
			submenuWidth: 360,
			children: [{
				title : 'MenuB1'
			},{
				title : 'MenuB2'
			},{
				title : 'MenuB3'
			},{
				title : 'MenuB4'
			}]
		},{
			title : 'MenuD',
			icon: 'icon-newwin'
		},{
			title : 'MenuE',
			icon: 'icon-newwin'
		}]
	});
	$('#demo').contextMenu({
		menu : mu,
		button: 3,//3: right click, 1: left click
		onPopup : function(el) {
			//onPopup event
		},
		//location: 'mouse',
		offset: { x: 0, y: 0 }
	}, function(action, el, pos) {
		alert(action);
		return false;
	});
});
</script>
Please <b>Right Click</b> on this panel.
<ul id="menuDemo" class="contextMenu menu2"></ul>